<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>主页</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="static/assets/css/normalize.css">
	<link rel="stylesheet" href="static/assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="static/assets/css/font-awesome.min.css">
	<link rel="stylesheet" href="static/assets/css/themify-icons.css">
	<link rel="stylesheet" href="static/assets/css/pe-icon-7-filled.css">
	<link rel="stylesheet" href="static/assets/css/flag-icon.min.css">
	<link rel="stylesheet" href="static/assets/css/style.css">
	<link href="static/assets/weather/css/weather-icons.css" rel="stylesheet" />
	<link href="static/assets/calendar/fullcalendar.css" rel="stylesheet" />
	<link href="static/assets/css/charts/chartist.min.css" rel="stylesheet">
	<link href="static/assets/css/lib/vector-map/jqvmap.min.css" rel="stylesheet">
	<link rel="shortcut icon" href="/static/images/4545-1.ico">
	<style type="text/css">	
		iframe{
			margin: 0px;
			width: 100%;
			height: 100%;
			border:0;
			overflow-x:hidden; 
		}
		
 		.nav-menu{flex:1;flex-direction:row;} 
 		.nav-menu li{display: flex;}
 		.nav-menu a{margin: auto;padding: 0 10px;font-size: 14px;}
 		.nav-menu a:hover{color: #03a9f3;} 
 		.nav-menu a:focus{color: #03a9f3 !important;} 
		
		aside.left-panel{height: calc(100vh - 55px);overflow-x: hidden !important;}
		.right-panel{height: calc(100vh - 55px);}
		.content{height: 100%;}
		
		aside.left-panel>nav{padding-bottom: 55px;}
		.lock{position: fixed;bottom: 0;width: 260px;padding: 10px;background: white;}
	</style>
	</head>
	<body>
		<!-- Left Panel -->
	    <aside id="left-panel" class="left-panel">
	        <nav class="navbar navbar-expand-sm navbar-default">
	            <div id="main-menu" class="main-menu collapse navbar-collapse">
	                <ul id="navBar" class="nav navbar-nav">
	                    <li class="active dashboard">
	                        <a href="default.html" target="right"><i class="menu-icon fa fa-laptop"></i>首页</a>
	                    </li>
						<li class="menu-title">我的菜单</li>
	                </ul>
	            </div><!-- /.navbar-collapse -->
	        </nav>
	    </aside>
	    <!-- /#left-panel -->
		<!-- Right Panel -->
	    <div id="right-panel" class="right-panel">
	        <!-- Header-->
	        <header id="header" class="header">
	            <div class="top-left">
	                <div class="navbar-header">
	                    <a class="navbar-brand" href="default.html" target="right"><img src="static/images/houtai2.jpg" alt="Logo"  width="40"></a>
<!-- 	                    <a class="navbar-brand hidden" href="/default/query" target="right"><img src="/static/images/logo2.png" alt="Logo"></a> -->
	                    <a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a>
	                </div>
	            </div>
	            <div class="top-right">
	                <div class="header-menu">
	                	<ul id="headMenuUl" class="nav-menu nav navbar-nav"></ul>
	                    <div class="header-left"></div>
	                    <div class="user-area dropdown float-right">
	                  	 <b>用户名:<span id="username"></span></b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	                    	<a onclick="layout()" href="javascript:;"><i class="fa fa-power -off"></i>退出登录</a>
	                    </div>
	
	                </div>
	            </div>
	        </header>
	        <!-- /#header -->
	        <!-- Content -->
	        <div class="content">
	            <iframe style="" name="right" type="text/html" src="default.html"></iframe>
	        </div>
	        <!-- /.content -->
	        <div class="clearfix"></div>
	    </div>
	</body>
	
	<script src="static/assets/js/vendor/jquery-2.1.4.min.js"></script>
	<script src="static/layer/layer.js"></script>
	<script src="static/js/ajax.js"></script>
	<script type="text/javascript">
		let topMenu;
		$(function(){
			//显示用户名
			$("#username").html(localStorage.getItem("username"));
			//查询菜单
			ajaxHttp({
				url:"system/sysMenu/listMenu",
				success:function(msg){
					//处理左侧菜单
					topMenu = msg.data;
					let topList = msg.data;
					let twoList = topList[0].children;
					showLeftMenu(twoList);
					//处理一级菜单
					for(let i=0;i<topList.length;i++){
						let oneMenu = topList[i];
						let li = $("<li><a class=\"topfont\" onclick=\"showMenu('"+oneMenu.menuId+"')\" href=\"javascript:;\">"+oneMenu.menuName+"</a></li>");
						$("#headMenuUl").append(li);
					}
				}
			})
		})
		
		//退出登录
		function layout(){
			localStorage.removeItem('access_token');
			localStorage.removeItem('username');
			location.href="index.html"
		}
		
		function showLeftMenu(twoList){
			for(let i=0;i<twoList.length;i++){
				let secondMenu = twoList[i];
				let li = $("<li class=\"menu-item-has-children dropdown show\"></li>");
				let a = $("<a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\"> <i class=\"menu-icon fa fa-cogs\"></i>"+secondMenu.menuName+"</a>");
				li.append(a);
				let thirdList = secondMenu.children;
				let ul = $("<ul class=\"sub-menu children dropdown-menu show\"></ul>");
				li.append(ul);
				for(let j=0;j<thirdList.length;j++){
					let thirdMenu = thirdList[j];
					let thirdLi = $("<li><i class=\"fa fa-id-card-o\"></i><a href=\""+thirdMenu.menuUrl+"\" target=\"right\">"+thirdMenu.menuName+"</a></li>");
					ul.append(thirdLi);
				}
				$("#navBar").append(li);
			}
		}
		
		
		function showMenu(pid){
			$("#main-menu>ul>li.menu-item-has-children").remove();
			for (let i = 0; i < topMenu.length; i++) {
				if(pid==topMenu[i].menuId){
					showLeftMenu(topMenu[i].children);
					break;
				}
			}
		}
		
	</script>
</html>
